<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="投诉商家" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view style="padding: 15rpx;">
			<view class="complaints-merchant">
				<view class="complaints-merchant-title">{{ storename }}</view>
				<view class="complaints-merchant-time">时间：2020-01-09 07:26:56</view>
				<view class="complaints-merchant-detail">
					<view class="complaints-merchant-detail-title">投诉内容：</view>
					<textarea v-model="content"></textarea>
					<button @click="onClickBtnSubmitContent">提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { yourFormatDateTime, config } from '@/utils/config.js'
	import { myMixin } from '@/utils/mixin.js'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'

	export default {
		mixins: [myMixin],
		components: {
			uniNavBar
		},
		data() {
			return {
				storeid: '',
				storename: '',
				content: '',
				currentTime: ''
			}
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			onClickBtnSubmitContent() {
				if (!this.storeid) {
					uni.showToast({
						icon: 'none',
						title: '暂未获取到商户id, 无法投诉'
					})
					return false
				}
				if (!this.content) {
					uni.showToast({
						icon: 'none',
						title: '请填写您要投诉的内容'
					})
					return false
				}
				uni.showLoading({ title: '保存中' })
				uni.request({
					url: `${config.api_base_url}member/complaint/${this.storeid}`,
					method: 'POST',
					header: {
						'AUTH': 'ROBOT ' + uni.getStorageSync('token')
					},
					data: {
						content: this.content
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							uni.showToast({
								icon: 'none',
								title: '投诉成功'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '../complaintssuccess/complaintssuccess'
								})
							}, 777)
						} else {
							uni.showToast({
								icon: 'none',
								title: status.msg
							})
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '投诉失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.hideLoading()
					})
				})
			}
		},
		onLoad(e) {
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				})
				setTimeout(() => {
					uni.removeStorageSync('role')
					uni.removeStorageSync('memberId')
					uni.removeStorageSync('token')
					uni.removeStorageSync('openId')
					uni.reLaunch({
						url: '../verificationcodelogin/verificationcodelogin'
					})
				}, 777)
				return false
			}
			this.currentTime = yourFormatDateTime(+new Date())
			if (e.storeid) {
				this.storeid = e.storeid
			}
			if (e.storename) {
				this.storename = e.storename
			}
		}
	}
</script>
<style>
	page {
		background: rgba(245, 245, 245, 1);
	}
</style>
<style scoped>
	.complaints-merchant {
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.05);
		padding: 38rpx 40rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.complaints-merchant-title {
		max-height: 84rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
		line-height: 42rpx;
		font-weight: 500;
		overflow: hidden;
	}

	.complaints-merchant-time {
		height: 42rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 42rpx;
		padding: 10rpx 0rpx 15rpx;
	}

	.complaints-merchant-detail {
		overflow: hidden;
		border-top: 2rpx solid #EEEEEE;
	}

	.complaints-merchant-detail-title {
		height: 80rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.85);
		line-height: 80rpx;
	}

	.complaints-merchant-detail textarea {
		width: 100%;
		height: 230rpx;
		background: rgba(248, 248, 248, 1);
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #000;
		padding: 20rpx;
		box-sizing: border-box;
		line-height: 40rpx;
	}

	.complaints-merchant-detail button {
		width: 112rpx;
		height: 48rpx;
		border-radius: 10rpx;
		border: 2rpx solid rgba(22, 119, 255, 1);
		text-align: center;
		line-height: 42rpx;
		padding: 0px;
		margin: 34rpx 0rpx 0rpx;
		font-size: 24rpx;
		color: rgba(22, 119, 255, 1);
		background: #fff;
		float: right;
	}
</style>
